<template>
    <div class="tech-member-info-store" @click="gotoDetail">
        <Avatar class="member-avatar" size="large" :src="memberInfo.headPic" alt="member avatar" />
        <div class="right-items-container">
            <div class="member-info-item member-detail" v-if="!memberInfo.mobile">
                <div class="member-name">{{memberInfo.nickName || '匿名食客'}}</div>
                <div class="member-control">
                    <div v-if="memberInfo.mobile" class="member-mobile">{{memberInfo.mobile}}</div>
                    <div v-else class="bind-phone-tip" @click.stop="bindPhone">
                        <TechIcon name="phone-gray" />绑定手机
                    </div>
                </div>
            </div>
            <div v-else-if="showCardInfo" class="member-info-item">
                <div class="member-info-title">{{balance}}</div>
                <div class="name">余额(元)</div>
            </div>
            <div class="member-info-item" @click.stop="couponsAction">
                <div class="member-info-title">{{(memberInfo.coupons || []).length}}</div>
                <div class="name">优惠券</div>
            </div>
            <div class="member-info-item" @click.stop="rightClick">
                <div class="member-info-title">
                    <TechIcon name="member-qrcode" :size="30" />
                </div>
                <div class="name">会员码</div>
            </div>
        </div>
    </div>
</template>

<script>
import { Tag } from 'vant';
import Avatar from '../base/Avatar';
import TechIcon from '../base/TechIcon';
export default {
    name: 'MemberInfoStore',
    components: {
        Tag,
        Avatar,
        TechIcon,
    },
    props: {
        type: {
            type: String,
            default: 'member', // member other
        },
        memberInfo: {
            type: Object,
            default() {
                return {
                    headPic: '',
                    nickName: '',
                    mobile: '',
                    coupons: [],
                };
            },
        },
        showCardInfo: {
            type: Object,
            default() {
                return {
                    balance: 0,
                };
            },
        },
    },
    computed: {
        balance() {
            return this.$props.showCardInfo.balance || 0;
        },
    },
    methods: {
        gotoDetail() {
            this.$emit('detailAction');
        },
        rightClick() {
            this.$emit('rightAction');
        },
        bindPhone() {
            this.$emit('bindPhoneAction');
        },
        couponsAction() {
            this.$emit('couponsAction');
        },
    },
};
</script>

<style lang="less">
.tech-member-info-store {
    .flex-row-center();
    justify-content: space-between;
    .p(@gap-md);
    background-color: @white;
    .member-avatar {
        .m-r(@gap-md);
    }
    .right-items-container {
        .flex();
        flex: 1;
        justify-content: space-between;
    }
    .member-info-item {
        .flex-column-center;
        .font-size-mini();
        color: @gray-darker;
        .m-r(@gap-sm);
        flex: 1;
        .member-info-title {
            .font-size-md();
            color: @gray-444;
            flex: 1;
            .flex-column-center();
        }
        .name {
            .font-size-sm();
            .m-t(@gap-sm);
            height: 20px;
        }
        &.member-detail {
            .flex-column();
            align-items: flex-start;
            .member-name {
                .font-size-md();
                font-weight: @font-weight-bold;
                .m-b(@gap-sm);
            }
            .member-control {
                .member-mobile {
                    .font-size-sm();
                    color: @gray-dark;
                }
                .bind-phone-tip {
                    width: 80px;
                    height: 22px;
                    border-radius: 11px;
                    .font-size-sm();
                    border: @border;
                    border-color: @gray-dark;
                    color: @gray-444;
                    .flex-row-center();
                    .tech-icon-phone-gray {
                        .m-r(3px);
                    }
                }
            }
        }
    }
    .member-center-btn {
        color: @card-color;
        .linear-right(@member-card-start-color, @member-card-end-color);
        .flex-row-center();
        .p-h(12);
        height: 30px;
        border-radius: @gap-md;
        .font-size-sm();
        font-weight: @font-weight-bold;
        .tech-icon-vip {
            .m-r(@gap-sm);
        }
    }
}
</style>
